<!--
 * @Author: qiye
 * @LastEditors: qiye
 * @description: page description
 * @Date: 2024-01-05 10:56:55
 * @LastEditTime: 2024-01-19 17:43:30
-->
<script setup lang="ts" name="ApplicationDevelopDetails">
import { computed, reactive } from 'vue'
import { useRouter } from 'vue-router'

import PageManage from './page-manage/index.vue'
import ApplicationSetting from './application-setting.vue'
import { api } from '@/MainApp/apis/application'

const props = defineProps({
  application: {
    type: Object,
    default: null
  },
  defaultTab: {
    type: String,
    // 'pageManage' | 'application'
    default: 'pageManage'
  }
})
const emit = defineEmits(['back'])
const router = useRouter()
const { msgError, msgSuccess, msgInfo } = useMessage()

const tabContentMap: any = {
  pageManage: PageManage,
  application: ApplicationSetting
}

const state = reactive({
  loading: false,
  tabs: [
    { id: 'pageManage', label: '页面管理' },
    { id: 'application', label: '应用设置' }
  ],
  activeTab: props.defaultTab
})
const currentComponent = computed(() => tabContentMap[state.activeTab])

const methods = {
  back: () => {
    emit('back')
  },
  preview: () => {
    if (!props.application.indexPath) {
      msgInfo('请设置首页地址')
      return
    }
    const url = `?domain=APPLICATION&xTenant=APP_PREVIEW&code=${props.application.code}${router.resolve({ path: props.application.indexPath }).href}`
    window.open(url)
  },
  publish: async () => {
    state.loading = true
    const res = await api.publish(props.application?.id)
    state.loading = false
    if (!res.success) {
      msgError(res.msg)
      return
    }
    msgSuccess(res.msg)
  },
  handleSaveSetting: async (app: any) => {
    console.log('handleSaveSetting ', app)
    copyValue(props.application, app)
  }
}
</script>

<template>
  <div class="details-content">
    <IkPageHeader
      title=""
      :show-divider="false"
      class="header"
      @back="methods.back"
    >
      <template #title>
        <div class="header-name">
          <IkLinearIcon :icon="application.icon" :background-color="application.iconBackground || '#28b8a4'" />
          <span class="application-name">{{ application?.name }}</span>
        </div>
        <IkPageTabs
          v-model="state.activeTab"
          split
          lazy-tab
          default-slot
          :tabs="state.tabs"
          :inner-name="state.activeTab"
        />
      </template>
      <template #right>
        <el-button
          text
          bg
          class="button-operation"
          :loading="state.loading"

          @click="methods.preview"
        >
          预览
        </el-button>
        <el-button
          class="button-operation"
          :loading="state.loading"
          type="primary"
          @click="methods.publish"
        >
          发布
        </el-button>
      </template>
    </IkPageHeader>
    <component
      :is="currentComponent"
      :application="application"
      class="content"
      @save="methods.handleSaveSetting"
    />
  </div>
</template>

<style lang="scss" scoped>
.details-content{
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  .header{
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-divider);

    .header-name{
      flex-basis: 300px;
      flex-shrink: 0;
      font-size: 16px;
      font-weight: 700px;
      display: flex;
      align-items: center;

      .application-name{
        margin-left: var(--space-normal);
      }
    }

    :deep(.ikwf-page-header){
      height: 56px;
    }

    :deep(.el-tabs){
      margin: 0;

      .el-tabs__header{
        .el-tabs__nav.is-top{
           transform: translateX(calc(100% * 3)) !important;
        }
      }
    }
  }

  .content{
    flex-grow: 1;
  }

  .button-operation{
    height: 32px;
  }
}
</style>
